<template>
  <div>
    <video ref="videoPlayer" controls>
      <source :src="videoUrl" type="video/mp4">
    </video>
    <p>{{ subtitleText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'http://localhost:8080/video',
      subtitleText: '',
    };
  },
  mounted() {
    this.fetchVideo();
    this.fetchSubtitle();
  },
  methods: {
    fetchVideo() {
      // 这里可以添加获取视频数据并设置视频播放源的逻辑
      fetch(this.videoUrl)
      .then((response) => response.text())
      .then((data) => {
          // 假设返回的数据是视频的真实播放地址，这里进行设置
          this.videoUrl = data;
        });
    },
    fetchSubtitle() {
      // 这里可以添加获取字幕数据并设置字幕显示内容的逻辑
      const subtitleUrl = 'http://localhost:8080/subtitle';
      fetch(subtitleUrl)
      .then((response) => response.text())
      .then((data) => {
          this.subtitleText = data;
        });
    },
  },
};
</script>

<style>
video {
  width: 100%;
}
</style>